<template>
  <transition name="">
    <div class="el-dialog" v-if="visible">
      <div class="el-dialog_title">{{title}}</div>
      <div class="el-dialog_content">{{content}}</div>
      <div class="el-dialog_btns">
        <span @click="leftFn">{{left.text}}</span>
        <span @click="rightFn">{{right.text}}</span>
      </div>
    </div>
  </transition>
</template>

<script>
/* eslint-disable quotes,vue/require-valid-default-prop */
export default {
  name: "el-dialog",
  methods: {
    hideDialog() {
      this.$emit('update:visible', false);
      return this;
    },
    leftFn() {
      this.hideDialog().left.cb();
    },
    rightFn() {
      this.hideDialog().right.cb();
    },
  },
  // props: ['title', 'content', 'left', 'right', 'visible'],
  props: {
    title: {
      type: String,
      required: true,
      default: '提示',
    },
    content: {
      type: String,
      required: true,
    },
    left: {
      type: Object,
      required: true,
      default: { text: '确定' },
      validator: value => value.text && value.cb, //  自定义验证方法
    },
    right: {
      type: Object,
      required: true,
      default: { text: '取消' },
      validator: value => value.text && value.cb,

    },
    visible: {
      type: Boolean,
      required: true,
      default: true,
    },
  },
};
</script>


<style lang="scss" scoped>
 .el-dialog{
   padding-top:12px;
   width: 80vw;
   max-width:300px ;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
   background: #fff;
   color: #444;
   border-radius: 4px;
   text-align: center;
   overflow: hidden;
   .el-dialog_title{
     letter-spacing: 2px;
   }
   .el-dialog_content{
     padding:12px;
     line-height: 1.4;
   }
   .el-dialog_btns{
     font-size: 0;
     border-top:1px solid #ccc;
     span{
       display: inline-block;
       width: 50%;
       line-height: 30px;
       font-size: 15px;
     }
     span:first-child{
       border-right: 1px solid #ccc;
       box-sizing: border-box;
     }
   }
 }
</style>
